import React, { PureComponent } from 'react';
import { List, Icon, Tag, Card, Divider } from 'antd';
import { connect } from 'dva';
import styles from './styles.less';
import DescriptionList from '@/components/DescriptionList';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import projectpic from '@/assets/th.jpg';

const { Description } = DescriptionList;


@connect(({ fakemodel }) => ({ iiot: fakemodel }))
class ProjectInfo extends PureComponent {

  constructor(props) {
    super(props);
    const project = {
      "code": 1,
      "name": "XXX医院",
      "type": "能源站项目",
      "address": "XXXXXXXXX",
      "memo": null,
      "src": null,
      "info": "新密市妇幼保健院于2018年12月30日乔迁新址。老院建筑面积约为1.6万平方米，新院冷热集中供应面积约为5万平方米。其实质为迁扩建项目。",
      "buildingArea": 40000,
      "coolPower": 4000,
      "heatPower": 4000,
      "electricPower": 4000,
      "delete": 0,
      "current": 1,
      "version": 1
    };
    this.state = {
      projectData: project
    };

  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      projectData: nextProps.iiot.eseProject
    });
  }

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'fakemodel/fetchProject',
    });
  }




  render() {

    const { projectData } = this.state;
    const { iiot } = this.props;

    return (
      <PageHeaderWrapper title="基础详情页" loading={!iiot.eseProject}>

        <Card bordered={false} >
          <DescriptionList size="large" title="基本信息" style={{ marginBottom: 32 }}>
            <Description term="编号">{projectData.code}</Description>
            <Description term="名称">{projectData.name}</Description>
            <Description term="类型">{projectData.type}</Description>
            <Description term="位置">{projectData.address}</Description>
            <Description term="备注信息">{projectData.memo}</Description>

            <Description term="项目简介">{projectData.info}</Description>
          </DescriptionList>
          <Divider style={{ marginBottom: 32 }} />

          <DescriptionList size="large" title="负荷信息" style={{ marginBottom: 32 }}>
            <Description term="建筑面积">{projectData.buildingArea} ㎡</Description>
            <Description term="制冷负荷">{projectData.coolPower} kW</Description>
            <Description term="供热负荷">{projectData.heatPower} kW</Description>
            <Description term="发电负荷">{projectData.electricPower} kW</Description>
          </DescriptionList>

          <Divider style={{ marginBottom: 32 }} />
          <div className={styles.title}>图片</div>
          <img src={projectpic} height={275} />
        </Card>
      </PageHeaderWrapper>
    );
  }
}

export default ProjectInfo;
